<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<style>
    .tg-color {
        background-color: red
    }

    .updown {
        width: 40px;
        height: 30px;
        display: inline-block;
        border: 1px solid;
        cursor: pointer;
    }
</style>

<div id="jqd">jq测试</div>


<div id="clickme">点击我</div>


<div style="width: 100px;height: 100px;border: 1px solid;position: relative;" id="dbclick"></div>
<div style="width: 100px;height: 100px;border: 1px solid; background-color: red;"></div>


<div style="width: 100px;height: 100px;border: 1px solid; background-color: red;" id="hoverstop"></div>

<div style="width: 100px;height: 100px;border: 1px solid; background-color: red;" id="hoverstop1"></div>
<textarea cols="51" rows="10" style="clear: both;" id="comment">jquery中attr和prop的区别 - 芈老头 - 博客园
2014年4月24日 - 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。...jquery中attr和prop的区别 - 芈老头 - 博客园
2014年4月24日 - 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。...jquery中attr和prop的区别 - 芈老头 - 博客园
2014年4月24日 - 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。...jquery中attr和prop的区别 - 芈老头 - 博客园
2014年4月24日 - 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。...jquery中attr和prop的区别 - 芈老头 - 博客园
2014年4月24日 - 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。...jquery中attr和prop的区别 - 芈老头 - 博客园
2014年4月24日 - 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。...</textarea>

<div class="updown">向下</div>
<div class="updown">向下</div>
<input type="text">
<input onclick="ubind()" type="button" value="解除bodyclick事件">
<input type="checkbox" checked="checked">
<button type="button" id="checkbutton">checkbutton</button>
<div class="crux"><a>aaaaaaaaaa</a><a>aaaaaaaaaa</a><a>aaaaaaaaaa</a></div>
<span id="getme"></span>
<script src="../modules/jquery.js"></script>
<script>
    function ubind() {
        $('body').unbind('click');
        $('#clickme').unbind('.plugin1');
    }


    $(function () {
        (function getpar() {

            var url = 'http://localhost:63342/myProject/_jq_test.html?a=1&b=2&d=333';//window.location.href;
            var reg = /([^?=&]+)=([^?=&]+)([^?=&]+)/g;


            while (reg.test(url)) {
                //console.log(RegExp.$1 + '-' + RegExp.$2+'-'+RegExp.$3);
            }


            var reg1 = /([^?=&]+)=([^?=&]+)/g;
            console.log(reg1.exec(url));
            console.log(RegExp.$1 + '-' + RegExp.$2);
            console.log(reg1.exec(url));
            console.log(RegExp.$1 + '-' + RegExp.$2);
            console.log(reg1.exec(url));
            console.log(RegExp.$1 + '-' + RegExp.$2);
        })();

        $('#checkbutton').click(function () {
            //alert($('input:checkbox').prop('checked'));
            alert($('input:checkbox').prop('id'));
            console.log($('input:checkbox')[0].ownerDocument);
        })

        var $comment = $('#comment');
        $('.updown').eq(0).click(function () {
            if (!$comment.is(':animated')) {
                $comment.animate({scrollTop: '+=45'}, 200);
            }

            //document.getElementById('comment').scrollTop += 10;
        })
        $('.updown').eq(1).click(function () {
            if (!$comment.is(':animated')) {
                $comment.animate({scrollTop: '-=45'}, 200);
            }
            //document.getElementById('comment').scrollTop += 10;
        })

        $('#hoverstop').hover(function () {
            $(this).stop(true).animate({height: '300px'}, 500).animate({width: '300px'}, 300);
        }, function () {
            $(this).stop(true).animate({height: '100px'}, 500).animate({width: '60px'}, 1000, function () {
                alert('完事');
            });
        })

        $('#dbclick').click(function () {
            $(this).animate({left: '500px', opacity: '1'}).animate({
                height: '200px',
                top: '300px',
                opacity: '2'
            }).fadeOut();
        })
        $('#dbclick').on('mouseover  mouseout', function () {
            console.log(event.type);
            $(this).toggleClass('tg-color');
            $(this).next().fadeToggle();
        })

        $('input').keyup(function (e) {
            alert(e.which);
        })

        var a = 0;
        $('#clickme').on('click.plugin1', function () {
            //$(this).style('display', 'none');
            //$(this).insertBefore('#clickme');
            /*a++;
             $('#getme').prepend('aa' + a);*/
            alert('click.plugin命名空间点击事件绑定');
        })
        $('#clickme').on('click', function () {
            //$(this).style('display', 'none');
            //$(this).insertBefore('#clickme');
            /*a++;
             $('#getme').prepend('aa' + a);*/
            alert('click普通  点击事件绑定');
        })

        $('div').attr('nodetype_', '123');
        //$('div').html('jq测试123');
        var div1 = document.getElementById('jqd');
        $('div1').attr({'attr1': 'v1', 'attr2': 'v2'});
        $(div1).on('click', function () {
            alert('点击');
            event.stopPropagation();
        })

        $('body').on('click', function () {
            //alert('点击body');
        })


        //console.log(div1.getAttribute('nodetype_'));


        $.ajax({
            url: 'http://localhost:63342/',
            type: 'post',
            async: false,
            dataType: 'text',
            //data: {'orderId': 'asd'},
            data: '3333333333333333',
            success: function (rs) {
                //console.log(rs)
                console.log(rs);
            },
            error: function (e) {
                console.log(e);
            }
        })

        $.a = function () {
            console.log('为$添加a方法');
        }

        $.prototype.b = function () {
            console.log('为$prototype增加b方法');
        }

        $.a();
        $.prototype.b();
        var bb = new jQuery;
        bb.b();

        $('.crux a').each(function (i, v) {
            var cnt = i + 1;
            cnt = cnt > 7 ? 1 : cnt;
            $(this).addClass('a' + cnt);
            var array = [1, 2, 3, 4, 5, 6, 7];
        })


        console.log(parseInt('110px', 12));

        $('#hoverstop1').on('click', function () {
            $(this)
                    .animate({width: '200px', height: '200px'}, 400)
                    .animate({width: '100px', height: '100px'}, 360)
                    .animate({width: '200px', height: '200px'}, 320)
                    .animate({width: '100px', height: '100px'}, 280)
                    .animate({width: '200px', height: '200px'}, 240)
                    .animate({width: '100px', height: '100px'}, 200)
                    .animate({width: '200px', height: '200px'}, 180)
                    .animate({width: '100px', height: '100px'}, 170)
        })


    })

    /*    (function (window, undefined) {
     //用一个函数域包起来，就是所谓的沙箱
     //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
     //把当前沙箱需要的外部变量通过函数参数引入进来
     //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
     window.MS = MS;
     })(window)*/



</script>

</body>
<style>
    @keyframes myfirst {
        0% {
            width: 1.9215rem;
            height: 1.9215rem
        }
        25% {
            width: 2.9215rem;
            height: 2.9215rem
        }
        50% {
            width: 1.9215rem;
            height: 1.9215rem
        }
        100% {
            width: 2.9215rem;
            height: 2.9215rem
        }
    }
</style>
</html>